<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="father">
    <div class="head">
      <div class="search">
        <div class="item">
          <div class="item1" v-on:click="goBack">
            <img src="@/assets/backs.png" width="50%" height="50%">
          </div>
          <div class="item2">
            <router-link to="/r_search" width="100%" height="100%">
              <el-input
                :placeholder= "placeholders"
                prefix-icon="el-icon-search"
                v-model="content"
                id="search">
              </el-input>
            </router-link>
          </div>
          <div class="item3">
            <div class="item3-item" v-on:click="search">搜索</div>
          </div>
        </div>
      </div>
    </div>
    <div class="body">
      <div class="search-content" v-if="show">
        <div class="content-item" v-for="(item2, index2) in showContent" :key="index2">
          <router-link :to="item2.src" tag="div">
            <div class="content-item-item" v-for="(item3, index3) in item2.contents" :key="index3">{{ item3 }}</div>
          </router-link>
        </div>
      </div>
      <div class="state" v-else>
        <div class="state-item1">
          <div>最近搜索</div>
          <div class="state-item1-item" v-on:click="deleteNewContent"><i class="el-icon-delete"></i></div>
        </div>
        <div class="state-item1-content" v-for="(item, index) in new_search" :key="index">
          <div class="state-item1-content-item" v-on:click="content=item,show=true,counts=1,new_search.push(content),contents.forEach((value) => {
        if (value.title.includes(content)) {
          showContent = value.ins
        }
      })">{{ item }}</div>
        </div>
        <div class="state-item2">
          <div>猜你想搜</div>
        </div>
        <div class="state-item2-content" v-for="(item1, index1) in data" :key="index1">
          <div class="state-item2-content-item" v-on:click="content=item1,show=true,counts=1,new_search.push(content),contents.forEach((value) => {
        if (value.title.includes(content)) {
          showContent = value.ins
        }
      })">{{ item1 }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'r_search',
  data () {
    return {
      counts: 0,
      show: false,
      content: '',
      count: 0,
      placeholders: '微泵液冷手机壳',
      data: ['微泵液冷手机壳', 'FreeBuds Pro 3', '平板', 'mate60', 'gt 4', '充电宝', 'p60', '乐臻版'],
      contents: [
        { title: '手机', ins: [{ contents: ['手机壳mate 60 pro', '手机壳', '手机mate 40 pro', '手机p30 pro', '手机mate 60 pro', '手机壳mate 60', '手机mate 50 pro', '手机膜mate 60 pro', '手机壳60 pro', '手机p30'], src: '' }] },
        { title: '汽车', ins: [{ contents: ['汽车问界', '汽车', '汽车充电器', '汽车平板', '汽车支架', '汽车充电桩', '汽车充电装备', '汽车脚垫', '汽车香水补充液', '汽车专享座椅电动腿托'], src: '/z_seven' }] },
        { title: '微泵液冷手机壳', ins: [{ contents: ['微泵液冷手机壳mate 60', '微泵液冷手机壳OBJ', '微泵液冷手机壳pro'], src: '' }] },
        { title: 'FreeBuds Pro 3', ins: [{ contents: ['FreeBuds Pro 3', 'FreeBuds Pro 3保护套', 'FreeBuds Pro 3耳机', 'FreeBuds Pro 3保护壳', 'FreeBuds Pro 3耳机套', 'FreeBuds Pro 3雅川青'], src: '' }] },
        { title: '平板', ins: [{ contents: ['平板', '平板电脑', '平板保护套', '平板matepad', '平板13.2', '平板电脑m6', '平板笔', '平板air', '平板华为'], src: '' }] },
        { title: 'mate60', ins: [{ contents: ['mate60', 'mate60 pro+', 'mate60 pro乐臻版', 'mate60 pro手机壳', 'mate60 pro手机', 'mate60 rs', 'mate60 pro充电器', 'mate60 rs手机壳'], src: '/Product2' }] },
        { title: 'gt 4', ins: [{ contents: ['gt 4', 'watch gt 4', 'gt 4表带', 'gt 4女款', 'watch gt 441mm', '手表gt 4pro', 'watch gt 4pro表带', 'gt 4充电器', 'gt 4手表', 'gt 4pro'], src: '' }] },
        { title: '充电宝', ins: [{ contents: ['充电宝华为', '充电宝超级快充66w', '充电宝超级快充20000', '充电宝磁吸', '充电宝18w', '充电宝88w', '充电宝华为快充'], src: '' }] },
        { title: 'p60', ins: [{ contents: ['p60 pro', 'p60 art', 'p60 pro手机壳', '钢化膜p60', '手机p60 art', 'p60 pro洛可可白'], src: '' }] },
        { title: '乐臻版', ins: [{ contents: ['乐臻版'], src: '' }] },
        { title: '耳机', ins: [{ contents: ['耳机', '耳机华为', '耳机华为无线', '耳机华为有线', '耳机pro 3', '耳机补配', '耳机转换器', '耳机5', '耳机转换头'], src: '' }] },
        { title: '华为', ins: [{ contents: ['华为mate60', '华为nova 12', '华为手表', '华为matex5', '华为mate 40pro', '华为 mate 60 pro+', '华为nova 11手机', '华为p 50手机pro', '华为畅享60'], src: '' }] },
        { title: '手表', ins: [{ contents: ['手表', '手表gt 4', '手表watch 4pro', '手表5x pro', '手表5', '手表5x', '手表非凡大师'], src: '' }] },
        { title: '取暖器', ins: [{ contents: ['取暖器', '取暖器暖风机黑色', '取暖器hyw22kra', '取暖'], src: '' }] },
        { title: '水杯', ins: [{ contents: ['水杯', '水杯旋盖版', '水杯鸿蒙', '水杯加热', '水杯弹盖款', '水杯50ml'], src: '' }] }
      ],
      showContent: [],
      new_search: ['手机', '汽车']
    }
  },
  methods: {
    goBack () {
      if (this.counts === 1) {
        this.counts = 0
        this.show = false
        this.content = ''
        this.showContent = []
      } else {
        this.$router.go(-1)
      }
    },
    search () {
      this.show = true
      this.counts = 1
      this.new_search.push(this.content)
      this.contents.forEach((value) => {
        if (value.title.includes(this.content)) {
          this.showContent = value.ins
        }
      })
    },
    deleteNewContent () {
      this.new_search = []
    }
  },
  mounted () {
    setInterval(() => {
      this.count++
      if (this.count > this.data.length - 1) {
        this.count = 0
      }
      this.placeholders = this.data[this.count]
    }, 2000)
  }
}
</script>

<style scoped>
.content-item-item{
  width: 100%;
  height: 40px;
  border-bottom:solid 1px gray;
  background-color: #fff;
  padding:4px;
  margin-bottom: 5px;
  display: flex;
}
.search-content{
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.state-item2-content-item{
  border:solid 1px #fff;
  background-color: gray;
  border-radius: 10px;
  padding:4px;
}
.state-item2-content{
  display:flex;
  width:100%;
  padding-left:3px;
  padding-top:5px ;
}
.state-item2{
  margin-top: 5px;
}
.state-item1-content-item{
  border:solid 1px #fff;
  background-color: gray;
  border-radius: 10px;
  padding:4px;
}
.state-item1-content{
  display:flex;
  width:100%;
  padding-left:3px;
  padding-top:5px ;
}
.state-item1-item{
  margin-left: 360px;
}
.state-item1{
  width:100%;
  display:flex;
}
.state{
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.item3-item{
  text-align: center;
  padding-top: 7px;
}
.search{
  height: 100%;
  width: 100%;
  background-color: #fff;
  direction: horizontal;
}
.item{
  display: flex;
  height: 100%;
  background-color:#fff;
}
.item1{
  width: 10%;
  background-color: #fff;
  padding-top: 20px;
}
.item2{
  width: 80%;
  padding-top: 10px;
}
.item3{
  width: 10%;
}
.father{
  width: 450px;
  height: 100%;
  background-color: #fff;
}
.head{
  height: 10%;
  width: 100%;
  background-color:aqua;
}
.body{
  width: 450px;
  height: 580px;
  border-bottom: solid 1px gray;
  overflow: hidden;
}
</style>
